<template>
    <el-form label-width="100px">
        <el-form-item label="SKU名称">
            <el-input placeholder="SKU名称" v-model="skuParams.skuName"></el-input>
        </el-form-item>
        <el-form-item label="价格(元)">
            <el-input placeholder="价格(元)" type="number" v-model="skuParams.price"></el-input>
        </el-form-item>
        <el-form-item label="重量(克)">
            <el-input placeholder="重量(克)" type="number" v-model="skuParams.weight"></el-input>
        </el-form-item>
        <el-form-item label="SKU描述">
            <el-input placeholder="SKU描述" type="textarea" v-model="skuParams.skuDesc"></el-input>
        </el-form-item>
        <el-form-item label="平台属性">
            <el-form :inline="true">
                <el-form-item v-for="item in attrArr" :key="item.id" :label="item.attrName">
                    <el-select v-model="item.attrIdAndValue">
                        <el-option v-for="attrValue in item.attrValueList" :key="attrValue.id" :label="attrValue.valueName" :value="`${item.id}:${attrValue.id}`"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </el-form-item>
        <el-form-item label="销售属性">
            <el-form :inline="true">
                <el-form-item v-for="item in saleArr" :label="item.saleAttrName" :key="item.id">
                    <el-select v-model="item.saleIdAndValue">
                        <el-option v-for="saleAttrValue in item.spuSaleAttrValueList" :key="saleAttrValue.id" :label="saleAttrValue.saleAttrValueName" :value="`${item.id}:${saleAttrValue.id}`"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </el-form-item>
        <el-form-item label="图片名称">
            <el-table border :data="imgArr" ref="table">
                <el-table-column type="selection" width="80px" align="center"></el-table-column>
                <el-table-column label="图片">
                    <template #="{row,$index}">
                        <img :src="row.imgUrl" style="width: 100px;height: 100px;">
                    </template>
                </el-table-column>
                <el-table-column label="名称" prop="imgName"></el-table-column>
                <el-table-column label="操作">
                    <template #="{row,$index}">
                        <el-button type="primary" size="small" @click="handler(row)">设置默认</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" size="default" @click="save">保存</el-button>
            <el-button type="primary" size="default" @click="cancel">取消</el-button>
        </el-form-item>
    </el-form>
</template>

<script lang="ts" setup name="SkuForm">
    // 引入请求Api
    import { reqAttr } from '@/api/product/attr'
    import { reqSpuImageList,reqSpuHasSaleAttr } from '@/api/product/spu'
    import {ref,reactive} from 'vue'
    import type {SkuData} from '@/api/product/spu/type'
    import { reqAddSku } from '@/api/product/spu'
    import { ElMessage } from 'element-plus'

    // 自定义事件的方法
    let $emit=defineEmits(['changeScene'])
    // 平台属性
    let attrArr=ref<any>([])
    // 销售属性
    let saleArr=ref<any>([])
    // 照片墙的数据
    let imgArr=ref<any>([])
    // 收集sku的参数
    let skuParams=reactive<SkuData>({
        // 父组件传递过来的参数
        category3Id:'', // 三级分类的ID
        spuId:'',//已有的Spu的ID
        tmId:'',// Spu的品牌ID
        // v-model收集
        skuName:'',//sku名字
        price:'',// sku价格
        weight:'',//sku重量
        skuDesc:'',//sku描述
        skuAttrValueList:[],
        skuSaleAttrValueList:[],
        skuDefaultImg:'' // sku图片的地址

    })
    // 获取table组件实例
    let table=ref<any>()

    // 取消按钮回调
    function cancel(){
        $emit('changeScene',{flag:0,params:''})
    }

    // 当前子组件的方法对外暴露
    async function initSkuData(c1Id:number|string,c2Id:number|string,row:any){
        // 收集数据
        skuParams.category3Id=row.category3Id
        skuParams.spuId=row.id
        skuParams.tmId=row.tmId
        // 获取平台属性
        let result=await reqAttr(c1Id,c2Id,row.category3Id)
        // 获取对应的销售属性
        let result1=await reqSpuHasSaleAttr(row.id)
        // 获取照片墙的数据
        let result2=await reqSpuImageList(row.id)
        // 存储平台属性
        attrArr.value=result.data
        // 存储销售属性
        saleArr.value=result1.data
        // 存储照片墙
        imgArr.value=result2.data
    }

    // 设置默认图片方法的回调
    function handler(row:any){
        // 点击时让全部图片的复选框不勾选
        imgArr.value.forEach((item:any)=>{
            table.value.toggleRowSelection(item,false)
        })
        // 复选框选中勾选
        table.value.toggleRowSelection(row,true)
        // 收集图片的地址
        skuParams.skuDefaultImg=row.imgUrl
    }

    // 保存按钮的回调
    async function save(){
        // 整理参数
        // 平台属性
        let attrArrs=attrArr.value.reduce((pre:any,next:any)=>{
            if(next.attrIdAndValue){
                let [attrId,valueId]=next.attrIdAndValue.split(':')
                pre.push({
                    attrId,
                    valueId
                })
            }
            return pre
        },[])
        skuParams.skuAttrValueList=attrArrs
        // 销售属性
        skuParams.skuSaleAttrValueList=saleArr.value.reduce((prev:any,next:any)=>{
            if(next.saleIdAndValue){
                let [saleAttrId,saleAttrValueId]=next.saleIdAndValue.split(':')
                prev.push({
                    saleAttrId,
                    saleAttrValueId
                })
            }
            return prev
        },[])
        // 发请求
        let result=await reqAddSku(skuParams)
        if(result.code==200){
            ElMessage({
                type:'success',
                message:'添加sku成功'
            })
            // 通知父组件切换场景为0
            $emit('changeScene',{flag:0,params:''})
        }else{
            ElMessage({
                type:'error',
                message:'添加sku失败'
            })
        }
    }

    // 对外暴露
    defineExpose({initSkuData})
</script>

<style scoped>
    .el-select{
        --el-select-width: 200px;
    }
</style>